<script lang='ts'>
import { defineComponent, reactive, ref, toRefs } from "vue";
import { DocumentAdd, DocumentRemove } from "@element-plus/icons";
import Bus from "@/views/yizhangtu/func/Bus";
import { QueryTaskSearch } from "../../../func/queryTaskSearch";
import { mapView } from "../../../func/index";
import { ElNotification } from "element-plus";
import store from "@/store/index";
export default defineComponent({
  name: "AttributeQuery",
  components: { DocumentAdd, DocumentRemove },
  setup() {
    //图层
    const layers = ref([
      {
        value: "1",
        label: "2019三调地类图斑",
      },
    ]);
    const layer = ref();

    //条件1
    const condition_one = ref([
      {
        value: "dlmc",
        label: "地类名称",
      },
      {
        value: "qsxz",
        label: "权属性质",
      },
    ]);
    const c1 = ref();
    //条件2
    const condition_two = ref([
      {
        value: "like",
        label: "包含",
      },
      {
        value: "=",
        label: "等于",
      },
    ]);
    const c2 = ref();
    //条件3
    const condition_three = ref([
      {
        value: "与",
        label: "与",
      },
      {
        value: "和",
        label: "和",
      },
    ]);
    const searchText = ref();
    const c4 = ref();

    //表单方法
    //删除条件
    const removeCondition = (item: any) => {};
    //添加条件
    const addCondition = () => {};
    //提交表单
    const submitForm = async () => {
      if (layer.value == null) {
        openNoticel("请选择要查询的图层");
        return;
      }
      if (c1.value == null) {
        openNoticel("请选择查询属性");
        return;
      }
      if (c2.value == null) {
        openNoticel("请选择包含或等于属性");
        return;
      }
      if (searchText.value == null) {
        openNoticel("请输入查询条件");
        return;
      }
      let _where = "";
      _where += c1.value;
      switch (c2.value) {
        case "=":
          _where += "='" + searchText.value + "'";
          break;
        case "like":
          _where += " like '%" + searchText.value + "%'";
          break;
        default:
          break;
      }
      console.log(_where,'_where')
      const _layerURL =
        "http://10.10.24.31:6080/arcgis/rest/services/T_LYXZ/TD_LYXT_SDSJ_BZ_2019_WP/MapServer/0";
      const queryTask = new QueryTaskSearch(mapView, _layerURL, _where);
      const queryList = await queryTask.QueryTaskResult();
      if (queryList.length > 0) {        
        store.dispatch("searchresult/ADD_RESULT", queryList);
        //打开搜索结果面板
        store.dispatch("searchresult/OPEN_PANEL");
      }
    };
    //重置表单
    const resetForm = (form: string) => {
      store.dispatch("searchresult/CLOSE_PANEL");
    };
    //警告提醒弹窗
    const openNoticel = (warMeg: string) => {
      ElNotification.error({
        title: "警告",
        message: warMeg,
        position: "top-left",
        offset: 200,
      });
    };
    return {
      layers,
      layer,

      //condition
      condition_one,
      condition_two,
      condition_three,
      //condition_value
      c1,
      c2,
      searchText,
      c4,

      //method
      removeCondition,
      addCondition,
      submitForm,
      resetForm,
    };
  },
});
</script>

<template>
  <div class="attributequery-page-wrap">
    <div class="page-column"><span>查询图层</span></div>
    <el-select v-model="layer" placeholder="请选择" style="padding: 10px">
      <el-option
        v-for="item in layers"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <div class="page-column"><span>查询条件</span></div>
    <div class="dynamic-operate">
      <el-icon :size="40" color="#aaa"><document-add /></el-icon
      ><el-icon :size="40" color="#aaa"><document-remove /></el-icon>
    </div>
    <el-row class="condition-group">
      <el-col :span="14"
        ><el-select v-model="c1" placeholder="请选择">
          <el-option
            v-for="item in condition_one"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="10"
        ><el-select v-model="c2" placeholder="请选择">
          <el-option
            v-for="item in condition_two"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
    </el-row>
    <el-row class="condition-group">
      <el-col :span="24"><el-input v-model="searchText" /></el-col>
      <!-- <el-col :span="10">
        <el-select v-model="c4" placeholder="请选择">
          <el-option
            v-for="item in condition_three"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col> -->
    </el-row>

    <div class="form-operate">
      <el-button type="primary" @click="submitForm">查询</el-button>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<style lang='less' scoped>
.attributequery-page-wrap {
  .page-column {
    padding-left: 10px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid #1299f5;

    span {
      color: #1299f5;
    }
  }

  .dynamic-operate {
    padding: 10px;
  }

  .condition-group {
    padding: 10px;
  }

  .form-operate {
    padding: 10px;
    display: flex;
    justify-content: end;
  }
}

// :deep(.el-tabs__active-bar) {
//   height: 5px;
// }
</style>